<navbar></navbar>

<title>Order Manage</title>


<div class="container-fluid">

    <div class="tab-content">
        <div class="col-sm-10 col-sm-offset-1 col-md-11 col-md-offset-1 main tab-pane active"
             id="ordermanager">

            <h2 class="sub-header">All Orders List</h2>

            <div class="row col-md-12">
                <ul class="inline" style="font-size:16px">
                    <li ng-if="vm.orders.length == 0">You have no orders. pls waiting!</li>
                    <li ng-if="vm.orders.length == 1">You have {{ vm.orders.length }} order.</li>
                    <li ng-if="vm.orders.length > 1">You have {{ vm.orders.length }} orders.</li>
                </ul>

            </div>

            <button type="button" class="btn btn-primary" id="u_order" ng-click="vm.untreated()">Untreated order</button>
            <button type="button" class="btn btn-success" id="r_order" ng-click="vm.receive()">Receive order </button>
            <button type="button" class="btn btn-danger" id="d_order" ng-click="vm.delivery()">Delivery order </button>
            <button type="button" class="btn btn-info" id="f_order" ng-click="vm.finish()">Finish order</button>
            <button type="button" class="btn btn-warning" id="re_order" ng-click="vm.refuse()">Refuse order</button>

            <br>

            <div id="orderTemplate" class="row col-md-12 orders" ng-show="vm.orders.length >= 1"
                 ng-repeat="tmp in vm.orders track by $index" style="margin-top: 12px;">
                <div class="panel panel-primary">
                    <div class="panel-heading" data-toggle="collapse"
                         data-parent="#accordion" href="#collapseOne">
                        <h4 class="panel-title" style="height: 96px">
                            <img class="img-circle" src="{{tmp.customer_headpic}}"
                                 width="70px" height="70px" style="float: left; text-align: center"/>&nbsp;&nbsp;&nbsp;
                            <span class="cname" style="font-size: 24px; padding-left: 12px">{{tmp.customer_name}}</span>&nbsp;&nbsp;&nbsp;<br>
                            <span class="pull-right currenttime"></span>
                            <hr style="width: 25%; border: 1px; margin-left: 95px;"
                                class="col-sm-offset-1"></hr>

                            <span class="id" style="padding-left: 25px;">Address: {{tmp.address}}</span>
                            <span class="col-sm-offset-2 total" style="margin-left: 20px;">Tel: {{tmp.telephone}}</span><br>

                            <span class="id" style="padding-left: 25px;">OrderId: {{tmp.order_id}}</span>
                            <span class="col-sm-offset-2 total" style="margin-left: 20px;">total: ${{tmp.total}}</span>

                            <div class="pull-right">
                                <button type="button" class="btn btn-success receive_btn" ng-show="tmp.state == 0"
                                        id="receive_btn" style="margin-right: 25px;" ng-click="vm.receiveOrder(tmp.order_id)">Receive
                                </button>

                                <button type="button" class="btn btn-danger refuse_btn" id="refuse_btn"
                                        ng-click="vm.refuseOrder(tmp.order_id)"ng-show="tmp.state == 0">Refuse
                                </button>

                                <button type="button" class="btn btn-warning delivery_btn"
                                        id="delivery_btn" ng-show="tmp.state == 1" ng-click="vm.deliveryOrder(tmp.order_id)">Delivery
                                </button>
                            </div>
                        </h4>
                    </div>

                    <div id="collapseOne" class="panel-collapse collapse in panel-default">
                        <div class="panel-body">
                            <table class="table table-hover" cellspacing="0" ng-if="tmp.items.length >= 1">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Img</th>
                                    <th>Price</th>
                                    <th>Count</th>
                                    <th>All</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in tmp.items track by $index">
                                    <td>{{$index+1}}</td>
                                    <td>{{ item.name }}</td>
                                    <td class="img"><img ng-src="{{item.img}}" width="30px"/></td>
                                    <td>{{ item.price }}</td>
                                    <td>{{ item.count }}</td>
                                    <td>{{ item.count*item.price }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>